<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯css实现横版瀑布流布局</title>

    <style>
        #container{
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            width: calc(100% - 100px);
            margin: 30px auto;
        }
        #container .item{
            flex-grow: 1;
            margin: 5px;
        }

        #container::after{
            content: "";
            flex-grow: 99999999;
        }
    </style>
</head>
<body>

    <div id="container"></div>
    
    <script>
        /*
        缺陷:
            只能指定每行图片的最低高度.如果页面缩小,某一个图片独占一行的时候会有较大的高度
        */
        for(var i = 0; i < 30; i ++){
            var dEle = document.createElement("div");
            var w0 = rd(100,300), h0 = rd(100, 300);
            var w = w0 * 150 / h0;
            dEle.className = "item";
            dEle.style.width = w + "px";
            dEle.style.flexGrow = w;
            dEle.innerHTML = `<div style="padding-bottom: ${ h0/w0 * 100}%"></div>`;
            // dEle.style.height = rd(100, 300) + "px";
            dEle.style.backgroundColor = `hsl(${ rd(0,360) }, 70%, 70%)`;
            container.appendChild(dEle);
        }

        function rd(min,max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
    </script>
</body>
</html>